<template>
    <el-container style="width:1100px">

        <el-card shadow="always" style="margin: 0 20px">
            <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane label="全部客户" name="1"></el-tab-pane>
                <el-tab-pane label="成交客户" name="2"></el-tab-pane>
                <el-tab-pane label="意向客户" name="3"></el-tab-pane>
            </el-tabs>
        </el-card>

        <el-main>
            <el-card shadow="always" style="height:600px">
                <el-form inline>
                    <el-form-item>
                        <el-input v-model="input1" size="large" :prefix-icon="Search" />
                    </el-form-item>
                    <el-form-item>
                        <el-button size="large">搜索</el-button>
                    </el-form-item>
                </el-form>
                <el-table>
                    <el-table-column label="用户" align="center" width="400px"></el-table-column>
                    <el-table-column label="成交" align="center"></el-table-column>
                    <el-table-column label="客户类型" align="center"></el-table-column>
                    <el-table-column label="最近跟进" align="center"></el-table-column>
                    <el-table-column label="下次跟进" align="center"></el-table-column>
                    <el-table-column label="客户来源" align="center"></el-table-column>
                    <el-table-column label="操作" align="center"></el-table-column>
                </el-table>
            </el-card>
        </el-main>
    </el-container>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { ref } from "vue"

const activeName = ref('1')
const input1 = ref('')
const formInline = ref({
    state: '',
    region: ''
})
const value = ref('')
</script>

<style scoped>
.el-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

/deep/ .el-select-dropdown {
    border: 1px solid deeppink;

}

.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}
</style>
